<template>
	<view class="hlgy" >
		<image src="@/static/guoyuan.png" class="guoshu"></image>
		<div class="guoshuzhi">果树成长值:{{guoshuzhi}}</div>
		<button  class="kaishi"  @click="shifen()" > 施肥</button>
		<image v-if="isanimated" class="shifei" src="@/static/logo.png"></image>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				isanimated:false,
				zhang:"aa",
				guoshuzhi:0,
				guoshu:0
			}
		},
		created(){
			        let now = new Date()
					let nian=now.getFullYear()
					let yue =now.getMonth()+1
					let ri =now.getDate()
					
					uni.request({
						url:"http://124.221.104.5:8080/huodong/update",
						data:{zhang:this.zhang,yue:yue,ri:ri,nian:nian},
						success:(res)=> {
							this.guoshuzhi=res.data.guoshuzhi
						}
						
					})
					
		},
		methods: { 
		   
	       async shifen(){
				  uni.request({
					url:"http://124.221.104.5:8080/huodong/huanleguoyuan",
					data:{zhang:this.zhang},
					success:(res)=> {
						this.guoshu=res.data
						
					}
				})
			await new Promise((res)=>setTimeout(res,500))
			      if(this.guoshuzhi==this.guoshu)
						{console.log("今天已经浇过肥了哦!")}
						else if(this.guoshuzhi!=this.guoshu)
						{      this.isanimated=true
						await new Promise((res)=>setTimeout(res,3000))
						    this.guoshuzhi=this.guoshu
							 this.isanimated=false
						}
			}

			
			
		}
	}
</script>

<style>
	@keyframes abab{
		from{transform: rotate(0deg);}
		to{transform: translate3d(-200%,-200%,0) rotate(-60deg)}
		30%{
			transform:translate3d(-200%,0,0) rotate(0deg);
		}
		60%{
			transform:translate3d(-200%,-200%,0) rotate(-60deg);
		}
		70%{
			transform:translate3d(-200%,-180%,0) rotate(-60deg);
		}
		80%{transform: translate3d(-200%,-200%,0) rotate(-60deg);}
		90%{transform:translate3d(-200%,-180%,0) rotate(-60deg);}
		 
		
	}
	.guoshu{
		position: absolute;
		left: 0rpx;
		height: 0rpx;
		width: 420rpx;
		height: 320rpx;
		z-index: -1;
	}
	.hlgy{
		width: 420rpx;
		height: 320rpx;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%,-50%);
		background-color: aquamarine;
	}
	.kaishi{
		margin-top: 200rpx;
		margin-left: 300rpx;
		width: 100rpx;
		
		
	}
	.shifei{
		position: absolute;
		animation-name: abab;
		animation-duration: 3s;
		width: 50rpx;
		height: 50rpx;
		left: 330rpx;
		top: 160rpx;
		
	}
	.guoshuzhi{
		margin-top: 20rpx;
		margin-left: 170rpx;
		z-index: 10;
	}
</style>